<template>
    <div>
        <!-- <div class="input-content"><input type="date" v-model="start_time" placeholder="开始日期" /></div> --> 
        <mt-popup
        :closeOnClickModal='false'
        v-model="popupVisible"
        popup-transition="popup-fade">
            <div class="content">
                <div class="input-content"><input type="date" v-model="start_time" placeholder="开始日期" /></div>
                <div class="input-content"><input type="date" v-model="end_time" placeholder="结束日期" /></div>
                <mt-button type="danger" size="normal" @click="getAllOrders(page)">获取</mt-button>
            </div>
        </mt-popup>
        <div class="order-content">
            <div>
                <p>未结算金额</p>
                <p>{{order_info.financial_money_0}}元</p>
            </div>
            <div @click="getReportList(0,1)">
                <p>未结算订单</p>
                <p>{{order_info.financial_num_0}}单</p>
            </div>
            <div>
                <p>已结算金额</p>
                <p>{{order_info.financial_money_1}}元</p>
            </div>
            <div @click="getReportList(1,1)">
                <p>已结算订单</p>
                <p>{{order_info.financial_num_1}}单</p>
            </div>
        </div>
        <ul class="order-list">
        <li v-for="(item,index) in orderList" :key="index">
            <mt-cell
            :title="item.order_no"
            :label="getDate(item.create_time)"
            :value="item.status == -4?'已取消':item.status == 0?'已支付':item.status == 1?'商家已接单':item.status == 2?'配送员接单':item.status == 3?'派送中':item.status == 4?'已送达':item.status == 5?'已完成':item.status == 6?'已评价':'已完成'">
            </mt-cell>
        </li>
        </ul>
        <div class="btn-group">
            <mt-button type="danger" size="small" @click="updateOrders(--page)">上一页</mt-button>
            <mt-button ttype="danger" size="small" @click="updateOrders(++page)">下一页</mt-button>
        </div>
        <div class="all-count">
            <p>区间统计:{{orderList.length}}单</p>
            <p>总计:{{count}}单</p>
        </div>
        <mt-button size='large' type="danger" class="time-btn" @click="popupVisible = true;page = 1">时间查询</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
import cookie from '../cookie'
import {AllOrder,report,ReportList} from '../api'
export default {
    data() {
        return {
            popupVisible:false,
            start_time:new Date().toLocaleDateString(),
            end_time:new Date().toLocaleDateString(),
            page:1,
            limit:10,
            orderList:[],
            count:0,
            order_info:[],
            financial:null,
            report:false
        }
    },
    created(){
        this.getReport();
        this.getAllOrders();
    },
    methods:{
        updateOrders(page){
            if(this.report){
                this.getReportList(this.financial,page);
            }else{
                this.getAllOrders(page);
            }
        },
        getReportList(financial,page){
            this.financial = financial;
            this.report = true;
            let roleinfo = JSON.parse(cookie.get('data','roleinfo'));
            const data = {
                type:roleinfo.type == 2?1:2,
                type_id:roleinfo.id,
                financial,
                token:cookie.get('data','token'),
                page:page?page:this.page,
                limit:this.limit
            }
            ReportList(data).then(res=>{
                this.orderList = res.data;
            })
        },
        getReport(){
            let roleinfo = JSON.parse(cookie.get('data','roleinfo'));
            const data = {
                token:cookie.get('data','token'),
                // status:this.status[0],
                start_time:this.start_time+' '+'00:00:00',
                end_time:this.end_time+' '+'23:59:59',
                type:roleinfo.type == 2?1:2,
                type_id:roleinfo.id
                // financial_status:this.settle[0]
            }
            report(data).then(res=>{
                console.log(res);
                this.order_info = res.data;
            })
        },
        getDate(now){
            now = new Date(now*1000);
            var year=now.getFullYear();
            var month=now.getMonth()+1; 
            var date=now.getDate(); 
            var hour=now.getHours(); 
            var minute=now.getMinutes(); 
            var second=now.getSeconds(); 
            return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
        },
        getAllOrders(page){
            this.report = false;
            if(!this.start_time){
                Toast({
                    message:'请选择开始日期',
                    className:'toast'
                });
                return;
            }else if(!this.end_time){
                Toast({
                    message:"请选择结束日期",
                    className:'toast'
                    });
                return;
            }
            let roleinfo = JSON.parse(cookie.get('data','roleinfo'));
            console.log(roleinfo);
            const data = {
                start_time:this.start_time+' 00:00:00',
                end_time:this.end_time+' 23:59:59',
                type:roleinfo.type == 2?2:1,
                id:roleinfo.id,
                page:page?page:this.page,
                limit:this.limit,
                token:cookie.get('data','token')
            }
            AllOrder(data).then(res=>{
                console.log(res);
                if(res.code == 200){
                    this.popupVisible = false;
                    this.orderList = res.data.list;
                    this.count = res.data.count;
                }
            })

        }
    }
}
</script>
<style scoped>
    .content{
        width: 10rem;
        height: 10rem;
        text-align: center;
        margin: auto;
        display: flex;
        padding: 1rem;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

    }
    .content input{
        /* border: none; */
        /* background: none; */
        /* -webkit-background:red */
    }
    .all-count{
        width: 7rem;
        height: 4rem;
        background: rgba(188, 188, 188, 0.6);
        position: absolute;
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        top: 50%;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    .time-btn{
        position: fixed;
        bottom: 0;
    }
    .input-content{
        text-align: center;
        border: none;
    }
    .order-content{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        font-size: 1.2rem;
    }
    .order-content>div{
        width: 50%;
        text-align: center;
        line-height: 2rem;
    }
    .order-list{
        height: calc(100vh - 13rem);
    }
    .btn-group{
        height: 2.4rem;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
</style>